<template>
  <div class="village_detail" v-if="flag">
    <head-top goBack="true" head-title="通知公告"></head-top>
    <div class="top-title">
      <div class="title border-bottom">{{detail.title}}</div>
      <div class="desc">
        <span class="author">{{detail.author}}</span>&nbsp;
        <span class="amount">浏览量：{{detail.reading_amount}}</span>&nbsp;
        <span class="time">{{detail.created_at*1000 |dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>
      </div>
      <mt-button type="primary" @click="downLoad(detail.id)">下载</mt-button>
    </div>
    <p v-html="detail.content" ref="box" class="content"></p>
  </div>
</template>
<style lang="scss" scoped>
  p {
    margin: 8px !important;
  }

  .village_detail {
    line-height: normal;
    background-color: #fff;
    overflow: auto;
    height: 100%;
    .mint-button {
      font-size: 12px;
      height: 25px;
      margin-top: 5px;
    }
    .content {
      padding: 0 2px;
      margin-top: 8px;
    }
    .top-title {
      margin: 40px 10px 0px 10px;
      .title {
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
      }
      .desc {
        padding-top: 10px;
        color: #666;
        font-size: 12px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import wx from 'weixin-js-sdk'
  import {IsWeiXin} from '../../common/js/isWeixin'

  export default {
    name: 'VillageDetail',
    data() {
      return {
        detail: {},
        img: [],
        flag: false
      }
    },
    created() {
      this.getDetailData()
      // 获取富文本里p标签里面的img标签
      setTimeout(() => {
        if (document.getElementsByClassName('content')[0]) {
          let imgbox = document.getElementsByClassName('content')[0].getElementsByTagName('img')
          // console.log(imgbox)
          var _this = this
          for (let i = 0; i < imgbox.length; i++) {
            this.img.push(imgbox[i].src)
            // console.log(this.img)
            // 判断是否是微信浏览器而现实不同的图片预览
            if (IsWeiXin()) {
              imgbox[i].addEventListener('click', function () {
                // console.log(imgbox[i].src)
                wx.previewImage({
                  current: imgbox[i].src, // 当前显示图片的http链接
                  urls: _this.img // 需要预览的图片http链接列表
                })
              })
            } else {
              // 如果图片是异步生成，在图片数据更新后调用
              this.$previewRefresh()
              imgbox[i].setAttribute('preview', 1)
            }
          }
        }
      }, 1000)
    },
    methods: {
      getDetailData() {
        const url = commonUrl.apihost + 'index.php/home/article/artDetail/?id=' + this.$route.params.id
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.detail = res.data.data
            this.flag = true
          }
        })
      },
      downLoad(id) {
        window.location = `${commonUrl.apihost}index.php/home/article/downloadArticle?id=${id}`
      }
    },
    components: {
      headTop
    }
  }
</script>
